<template>
  <scroll-view
    class="supplyChain"
    scroll-y="true"
    @scrolltolower="onScrollToLower"
    @scroll="onScrollViewScroll"
    :scroll-top="scrollViewTop"
    ref="scrollViewRef"
  >
    <view style="padding: 20rpx">
      <!-- 搜索 -->
      <view class="search">
        <u-search
          bg-color="#fff"
          border-color="#fd6134"
          placeholder="输入关键字"
          v-model="keyword"
          @click="onSearch"
          @custom="onSearch"
        ></u-search>
      </view>
      <!-- title -->
      <view class="categoryList">
        <view class="iconTitle">
          <view class="icon" v-for="(item, index) in iconTitle" :key="index">
            <image
              style="width: 30rpx; height: 30rpx"
              :src="imag1"
              mode=""
            ></image>
            <text style="margin: 0 10rpx">{{ item }}</text>
          </view>
        </view>
      </view>
      <view class="header">
        <!-- 金刚区域 -->
        <view class="showShopList">
          <view
            class="icon"
            @click="goShopList(item)"
            v-for="(item, index) in SupplyheaderList"
            :key="index"
          >
            <image
              style="width: 80rpx; height: 80rpx"
              :src="getImgFullPath(item.imageUrl)"
              mode=""
            ></image>
            <view class="titleName">{{ item.name }}</view>
          </view>
        </view>
      </view>

      <!-- 商品列表组件 -->
      <ProductList
        ref="productListRef"
        :shopMode="shopMode"
        :shop-id="shopGYL_Id"
        :keywords="keyword"
        :auto-load="true"
        :hot-icon="hot"
        @product-click="gotoGoodsDetail"
      />
      <!-- 弹框去地址页面 showAddressModal-->
      <view>
        <u-modal
          v-model="showMode"
          :show-cancel-button="true"
          confirm-text="升级"
          title="发现新版本"
          @confirm="toHome"
        >
          <view class="u-update-content">
            <rich-text :nodes="content"></rich-text>
          </view>
        </u-modal>
      </view>
    </view>
  </scroll-view>
  <u-back-top
    @click="backTop"
    :scroll-top="scrollTop"
    :visibility-height="100"
  ></u-back-top>
</template>

<script setup lang="ts">
import { watch, reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
//api
import { productApi, orderApi, baseApi } from '@/api'
//搜索
// 图片
import { getImgFullPath } from '@/utils'
import imag1 from '../../static/icon.png'
import imag2 from '../../static/img1.png'
import hot from '../../static/hot.png'
// 组件
import c_tabbar from '../tabbar/index.vue'
import ProductList from '../../components/goodsList.vue'

const emit = defineEmits(['switchTab'])
// 初始化数据
const showMode = ref(false)
const content = ref(
  `当前页面模式和用户登录模式不匹配，请先清空后台软件，再次尝试。`
)
const keyword = ref('')
const iconTitle = ['正品保障', '品类齐全', '全球好货', '底价供货']
const goodsList = ref<any>([])
const shopMode = ref<any>()
const SupplyheaderList = ref<any>([])
const jgqId = ref(0) //金刚区id
const shopGYL_Id = ref(0) //供应链店铺id
// 分页相关数据
const pagination = reactive({
  pageIndex: 1,
  pageSize: 10,
  total: 0,
  loading: false,
  noMoreData: false
})

//#region ************ 搜索 ********************** */
//* search 是确定点击过去之后搜索框能自动获取焦点且页面框显色
const onSearch = () => {
  uni.navigateTo({ url: `/packageG/pages/goods/index?search=1` })
}

//#endregion

//#region ************ 金刚区 ********************** */
const getSupplyheaderList = async () => {
  const { data } = await baseApi.getCategoryList({
    pageIndex: 1,
    pageSize: 20,
    id: jgqId.value,
    type: shopMode.value,
    detail: true
  })
  SupplyheaderList.value = data.records[0].advertisingList
}

// 点击金刚区
const goShopList = (item: any) => {
  if (item.content) {
    const categoryId = JSON.parse(item.content).categoryId
    uni.navigateTo({
      url: `/packageG/pages/goods/index?categoryId=${categoryId}&name=${item.name}`
    })
  } else {
    uni.navigateTo({ url: `/packageG/pages/goods/index` })
  }
}
//#endregion

// #region ************ 商品列表 ********************** */
// 滚动到底部时加载更多
const productListRef = ref()
const onScrollToLower = () => {
  productListRef.value?.loadMore()
}

// 点击取商品详情---后续需要从app进入需要带入mode和app
const gotoGoodsDetail = (item: any) => {
  uni.navigateTo({
    url: `/packageG/pages/goods/goodsDetail?id=${item.productId}`
  })
}

// #endregion

// 和当前mode不符合
const toHome = () => {}

//供应链金刚区id
const getGYL_Id = (id: any) => {
  switch (Number(id)) {
    case 4:
      jgqId.value = baseApi.advertising_enum.XFL_GYL
      break
    case 6:
      jgqId.value = baseApi.advertising_enum.CLKJ_GYL_SHOP
      break
    default:
      uni.showToast({ title: '请先清空软件，再进入', icon: 'error' })
      break
  }
}
// 供应链商店id
const getGYL_SHOP_Id = (id: any) => {
  switch (Number(id)) {
    case 4:
      shopGYL_Id.value = baseApi.advertising_enum.XFL_GYL_SHOP
      uni.setStorageSync('gylShopId', shopGYL_Id.value)
      break
    case 6:
      shopGYL_Id.value = baseApi.advertising_enum.CLKJ_GYL_SHOP
      uni.setStorageSync('gylShopId', shopGYL_Id.value)
      break
    default:
      uni.showToast({ title: '请先清空软件，再进入', icon: 'error' })
      break
  }
}

onLoad((option) => {
  if (option?.mode) {
    console.log('首页', option?.mode)
    // showMode.value = true
    shopMode.value = option?.mode
    uni.setStorageSync('shopMode', option?.mode)
    getGYL_Id(option?.mode)
    getGYL_SHOP_Id(option?.mode)
  } else {
  }

  getSupplyheaderList()
})

// 显示返回顶部
const scrollViewTop = ref(0)
const scrollTop = ref(0)

// 返回顶部
const backTop = () => {
  scrollViewTop.value = 1
  setTimeout(() => {
    scrollViewTop.value = 0
  }, 10)
}
let isScrolling = false
const onScrollViewScroll = (e: any) => {
  if (!isScrolling) {
    scrollTop.value = e.detail.scrollTop
  }
}
// 监听商品列表变化，检查是否需要预加载
// watch(goodsList, () => {
//   checkPreload()
// })
</script>

<style lang="scss" scoped>
/* 移除原来的 .goodsList 样式，因为现在使用组件 */
.supplyChain {
  height: 100%;
  .header {
    padding-top: 20rpx;
    margin: 20rpx 0;
    border-radius: 20rpx;
    background-color: #fff;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  }
  .categoryList {
    .iconTitle {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 20rpx 0;

      .icon {
        display: flex;
        align-items: center;
        font-size: 20rpx;
        color: #a3a3a3;
      }
    }
  }
  .showShopList {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    .icon {
      width: 120rpx;
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      .titleName {
        font-size: 24rpx;
        margin: 20rpx 0;
      }
    }
  }
  .loading-tip {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx;
    color: #999;
  }
}

:deep(.u-content) {
  width: 50% !important;
}
:deep(.u-action-active) {
  color: #f85f33;
  padding: 10rpx;
  background-image: url(../../static/dio.png);
  background-repeat: no-repeat;
  background-position: right top;
}
</style>
